<template>
    <div class="disinfection">
        <div class="section-wrap">
            <div class="form-section">
                <div class="form-item form-item-style1 form-break">
                    <div class="label-title">
                        <label>单位名称</label>
                    </div>
                    <div class="label-container">
                        <!-- <input type="text"
                                disabled
                                class="longinp"
                               v-model="params.DeptName"> -->
                        <div class="label-div"><a href="javascript:;"><em>{{params.DeptName|unescape}}</em></a></div>
                    </div>
                </div>
                <!-- <div class="form-item form-item-style2">
                    <div class="label-title space-between">
                        <div class="space-between">
                            <label>隐患描述</label>
                            <i class="iconfont icon-required"></i>
                        </div>
                        <a @click="toselectmsg">选择隐患</a>
                    </div>
                    <div>
                        <textarea @change="hidenewfirst(hiddenmeta.description)"
                                placeholder="请输入隐患描述（自行换行）"
                                v-model="params.DisinfectUserName"></textarea>
                    </div>
                </div> -->
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>消毒人员</label>
                        <i class="iconfont icon-required"></i>
                    </div>                  
                    <!-- <div class="disinfect_mid">
                        <input type="text"
                                placeholder="请输入消毒人员姓名"
                                v-model="params.DisinfectUserName">
                    </div> -->
                     <div class="right-select">
                        {{disinfectObj.disinfectman?disinfectObj.disinfectman:'请选择'}}
                        <i class="iconfont icon-jinru rightmsg" @click="showline"></i>
                    </div>
                    <!-- <group class="disinfect_r">
                        <popup-picker :data="personList"
                                      v-model="disinfectman"
                                      placeholder="请选择"
                                      @on-change="selectPerson"></popup-picker>
                    </group> -->
                     
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>消毒区域</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div>
                        <input type="text"
                                class="longinp"
                                placeholder="请输入消毒区域"
                               v-model="params.AreaName">
                    </div>
                    <!-- <group>e
                        <popup-picker :data="areaList"
                                      v-model="params.AreaName"
                                      placeholder="请选择"
                                      @on-change="selectPerson"></popup-picker>
                    </group> -->
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>记录人员</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div>
                        <input type="text"
                                class="longinp"
                                placeholder="请输入记录人员"
                               v-model="params.CreateUserName">
                    </div>
                    <!-- <group>
                        <popup-picker :data="recordermanList"
                                      v-model="params.CreateUserName"
                                      placeholder="请选择"
                                      @on-change="selectPerson"></popup-picker>
                    </group> -->
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>消毒时间</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <group>
                        <datetime v-model="params.DisinfectTime" format="YYYY-MM-DD HH:mm" @on-change="changeTime"></datetime>
                    </group>
                </div>   
                <div class="form-item form-item-style2">
                    <div class="label-title">
                        <label>备注</label>
                    </div>
                    <div>
                        <textarea class="areainfo" 
                                height="300"
                                placeholder="点击输入备注"
                                v-model="params.Remark"
                                :disabled="isDisable"></textarea>
                    </div>
                </div>  
                <!-- <div class="form-section">
                    <h3>
                        附件
                    </h3>
                    <div class="form-item form-item-style1"
                        v-for="(item,index) in params.AttchFile"
                        :key="index"
                        @click="preview(item.FilePath)">
                        <div class="label-title label-title1">
                            <label>附件</label>
                        </div>
                        <div class="right-section">
                            <span>预览</span>
                            <x-icon type="ios-arrow-right"
                                    size="20"
                                    class="icon-right"></x-icon>
                        </div>
                    </div>
                </div> -->

                <div class="form-item form-item-style2">
                    <div class="label-title space-between">
                        <label>附件</label>
                        <span>当前共上传{{uploadLength}}个附件</span>
                    </div>
                    <div class="upload-wrap">
                        <upload @setFormData="setFormData" limitNumber="5"></upload>
                        <!-- <strong v-else
                                class="no-img">暂无图片</strong> -->
                    </div>
                </div>
                <div class="btns">
                    <!-- <button @click="handleSubmit('save')">保存</button>
                    <button class="green"
                            @click="handleSubmit('submit')">提交</button> -->
                    <button class="blue"
                        @click="toSubmit">提交</button>
                </div>
            </div>
        </div>
        <div v-transfer-dom>
           <group > 
                <popup v-model="lineValue"
                   width="100%"
                   @on-hide="propHide">
                    <!-- <x-switch v-model="switchmodel" style="
                        background-color: #2269FC;
                    " title="全选"  @change.native="switchM"></x-switch> -->
                    <div class="searchDiv" >
                        <input type="text" v-model="username" class="search" placeholder="输入用户名搜索">
                    </div>
                    <div class="position-horizontal-demo"
                        v-for="(item,index) in hdLevel"
                        :key="index"
                        @click="selectline(item,index)">    
                        <!-- <x-switch title="全选"></x-switch> -->
                        <span >
                            {{item.DisplayName}}
                        </span>
                        <x-icon type="ios-checkmark-empty"
                                size="30"
                                v-if="checklist[index]"></x-icon>
                    </div>                   
                </popup>
            </group>
        </div>
        <myMenu></myMenu>
    </div>
</template>
<script>
import upload from '@/commonComponents/upload/index'
import { XSwitch, Group, Cell, Popup, TransferDom} from 'vux'
import http from '../../../axios/public'
import myMenu from '@/commonComponents/menu'
export default {
    components: {
        upload,
        myMenu,
        Popup,
        XSwitch
    },
    directives: {
        TransferDom
    },
    data() {
        return {
            userInfo: {},
            params: {
                DisinfectTime: this.getdatenew(),//消毒时间
            },
            personList: [],
            disinfectObj: {disinfectman: '',disinfectId: ''},//消毒人员
            areaList: [['办公室','餐厅','洗手间']],
            recorderman: ['赵高'],//记录人员
            recordermanList: [['王五','赵六']],
            title: 'haha',
            isDisable: false,
            addFlag: true,// 提交开关（避免多次提交）          
            formData: new FormData(),
            images: [],
            uploadLength: 0, // 图片上传个数
            pageIndex: 1,
            pageSize: 20,
            listArr: [],//列表数据
            listCount: 0, // 当前列表条数
            listAllCount: 0, // 总条数
            resArr: [],//人员列表数组
            hdLevel: [], // 
            lineValue: false, // 选择人员
            switchmodel:false,
            checklist: [], // 人员列表
            username: '',//输入框用户姓名
            total: 0,
        }
    },
    watch:{
        'username'(val){
            this.checklist = []
            this.switchmodel = false
            this.onPullingDown(val)
        }
    },
    created() {
        //获取用户信息，判断是否有操作权限
        this.userInfo = JSON.parse(localStorage.getItem('registerInfo')) || {}
        if(this.userInfo){
            this.params.DeptName = this.userInfo.departName
            this.params.deptid = this.userInfo.departId
        }
        
        this.getArea()
        this.onPullingDown()
        // this.getDisinfectionman()
    },
    methods: {
        //获取消毒区域
        getArea () {
            let params = {}
            http.fetchPost('/api/Disinfect/GetArea',params)
            .then((res) =>{
                // console.log(res)
            }).catch(() => {

            }).finally(() => {
                this.$vux.loading.hide()
            })
            
        },
        searchname (name) {
            // 查询人员
            let params = {
                'pageSize': 2000,
                'pageIndex':1,
                'deptid':this.userInfo.departId,
                'EmployeeType':'',
                'name':name
            }
            this.$axiosAjax.getalluserlist(params).then((res) => {
                if (res.status == 200) {
                    this.hdLevel = res.data.Data
                }
            }
        ).finally(() => {
                this.$vux.loading.hide()
            })
        },
        getDisinfectionman() {
            let that = this
            let params = {
                pageSize: this.pageSize,
                pageIndex: this.pageIndex,
                name: '',
                deptid: this.userInfo.departId,
                EmployeeType: ''
            }
            http.fetchGet('/api/Employee/Get',params)
            .then((res) =>{
                that.resArr = res.data.Data
                // console.log(that.resArr)
                that.resArr.forEach(function(item){
                    // that.listArr.push({
                    //     DisplayName: item.DisplayName,
                    //     EmployeeId: item.EmployeeId
                    // })
                    that.listArr.push(item.DisplayName)
                })
                that.personList.push(that.listArr)
                that.listCount = that.listArr.length
                that.listAllCount = res.data.count
            }).catch(() => {

            }).finally(() => {
                this.$vux.loading.hide()
            })
        },
        onPullingDown () {
            // 获取所有人员
            let params = {
                'pageSize': 2000,
                'pageIndex':1,
                'deptid':this.userInfo.departId,
                'EmployeeType': '',
                'name': this.username
            }
            this.$axiosAjax.getalluserlist(params).then((res) => {
                if (res.status == 200) {
                   this.hdLevel = res.data.Data
                    // res.data.forEach(element => {
                    //     this.hdLevel.push(element.DisplayName)
                    // });
                    this.total = res.data.count
                }
            }
        ).finally(() => {
                this.$vux.loading.hide()
            })
        },
        //获取当前日期、时间
        getdatenew() {
            var date = new Date();
            var seperator1 = "-";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            var hour = date.getHours();
            var minute = date.getMinutes();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            if (hour >= 0 && hour <= 9) {
                hour = "0" + hour;
            }
            if (minute >= 0 && minute <= 9) {
                minute = "0" + minute;
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate + ' ' + hour + ':' + minute;
            return currentdate;
        },
        preview (filePath) {
            if (this.regImg.test(filePath)) {
                this.$router.push({
                    path: '/previewImg',
                    query: {
                        previewImg: filePath
                    }
                })
            } else {
                wx.miniProgram.navigateTo({
                    url: `/pages/openDocument/index?filePath=${filePath}`
                })
            }
        },
        setFormData (formData, uploadLength, images) {
            // console.log(222,formData,uploadLength,images);
            this.formData = formData
            this.uploadLength = uploadLength
            this.images = images
        },
        // 提交
        toSubmit () {
            // if(!this.params.DisinfectUserName || !this.params.AreaName || !this.params.CreateUserName || !this.params.DisinfectTime){
            //     this.$vux.toast.text('请完善相关信息')
            //     return false
            // }
            if (!this.disinfectObj.disinfectman) {
                this.$vux.toast.text('请选择消毒人员');
                return false; 
            }else{
                this.params.DisinfectUserName =  this.disinfectObj.disinfectman
                this.params.DisinfectUserId =  this.disinfectObj.disinfectId
            }
            if (!this.params.AreaName) {
                this.$vux.toast.text('请输入消毒区域');
                return false; 
            }
            if (!this.params.CreateUserName) {
                this.$vux.toast.text('请输入记录人员');
                return false; 
            }
            if (!this.params.DisinfectTime) {
                this.$vux.toast.text('请选择消毒时间');
                return false; 
            }
            if (!this.addFlag) {
                return false
            }
            this.addFlag = false
            this.$vux.loading.show({
                text: '正在提交中，请耐心等待...'
            })
            http.fetchPost2(
                '/api/Disinfect/Add',this.params, this.formData
            ).then(
                (res) => {
                    // console.log(res)
                    if (res.data.code == 0) {
                        this.$vux.toast.text('消毒记录提交成功')
                        setTimeout(() => {
                        this.$router.go(-1)
                            // wx.miniProgram.navigateBack()
                        }, 1000)
                    } else {
                        this.$vux.toast.text(res.data.info)
                        this.addFlag = true
                    }
                }
            ).catch((error) => {
                if(error.message.includes('timeout')){   // 判断请求异常信息中是否含有超时timeout字符串
                    console.log('错误回调',error);
                    this.$vux.toast.text('请求超时，请稍后再试')
                }
                this.addFlag = true
            }).finally(() => {
                this.$vux.loading.hide()
            })
        },
        propHide () {
           this.username = ''
           this.switchmodel = false
           this.checklist = []
        },
        showline () {
            if(this.hdLevel.length==0) {
                this.$vux.toast.text('暂无人员,请先增加人员');
            } else {
                this.lineValue = true
                // this.onPullingDown()
            }
        },
        selectline (items, index) {
            if(!this.checklist[index]&&this.checklist.length>0){
                this.checklist = []
            }
            this.checklist[index] = !this.checklist[index]      
            let typeNamelist = []
            let typeLists = []
            this.disinfectObj.disinfectman=this.hdLevel[index].DisplayName,
            this.disinfectObj.disinfectId=this.hdLevel[index].EmployeeId,
            this.$forceUpdate()
                
            this.lineValue = false
            this.$nextTick(() => {
                document.querySelectorAll('.vux-number-input').forEach((item)=>{
                    console.log(item)
                    if(item != null) {
                        item.setAttribute('pattern', '')
                    }          
                })
            })
        },
        // 全选
        switchM () {
            if(this.switchmodel) {
                this.hdLevel.forEach((item,index)=>{
                    if(!this.checklist[index]) {
                        this.selectline(item,index)
                    }
                })
            } else {
                 this.checklist =[]
            }
        },
        selectPerson(e) {
            // console.log(e);
            // this.params.DisinfectUserName = this.disinfectman[0]
        },
        handleSelectPerson(ids,names){
            console.log(ids,names);
        },
        changeTime() {
            
        },
    }
}
</script>
<style scoped lang="less">
.searchDiv{
    background-color: #ffff;
    padding: 10px 0;
    .search{
        width: 360px;
        margin: 0 auto;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        box-sizing: border-box;
        border-radius: 10px;
        display: block;
        border: 1px solid #999;
    }
}
.position-horizontal-demo {
    height: 55px;
    line-height: 55px;
    padding-left: 20px;
    font-size: 16px;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;
    background-color: #fff;
    border-bottom: 1px solid #ebeef3;
}
</style>
<style lang="less">
.disinfect_mid{
    width: 60%;
    position: relative;
    left: 13px;
    input{
        width: 100%;
    }
}
.disinfection{
    .longinp{
        width: 250px;
    }
    .areainfo{
        color: #666;
    }
}
.form-item-style1.form-break{
    height: auto;
    line-height: auto;
}
.label-container a{display:inline-block;text-align:center}
.label-div{
    width: 250px;
    font-size: 14px;
    text-align: right;
    word-break: break-all;
    line-height: 20px;
}
.label-div em{
    position:relative;
    font-style:normal;
    text-align:left;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    color: #999;
}
 
.disinfection .vux-popup-dialog {
    height: 300px !important;
}
.disinfection .right-select{
    font-size: 14px;
    color: #999;
}
.disinfection .icon-jinru:before{
    color: #c8c8cd;
}
/// .disinfect_r{
//     width: 15%;
//     position: relative;
//     .weui-cell__ft{
//         height: 55px;
//         position: absolute!important;
//         left: 30px!important;
//     }
//     .vux-popup-picker-value {
//         visibility: hidden;
//     }
// }
</style>